{% extends "base.html" %}
{% from 'products/includes/topic_macros.html' import topic_sidebar %}
{% set crumbs = [(url('products.product', slug=product.slug), pgettext('DB: products.Product.title', product.title))] %}
{% if subtopic %}
  {% set crumbs = crumbs + [(url('products.documents', product_slug=product.slug, topic_slug=topic.slug), pgettext('DB: products.Topic.title', topic.title)), (None, pgettext('DB: products.Topic.title', subtopic.title))] %}
  {% set canonical_url = canonicalize(model_url=subtopic.get_absolute_url()) %}
{% else %}
  {% set crumbs = crumbs + [(None, pgettext('DB: products.Topic.title', topic.title))] %}
  {% set canonical_url = canonicalize(model_url=topic.get_absolute_url()) %}
{% endif %}
{% set styles = ('products',) %}
{% set search_params = {'product': product.slug} %}

{% block title %}{{ pgettext('DB: products.Topic.title', topic.title) }} | {{ _('{product} Help')|f(product=pgettext('DB: products.Product.title', product.title)) }}{% endblock %}

{% block content %}
  <div class="grid_12 search-form-large">
    {{ search_box(settings, id='support-search-documents', params=search_params) }}
  </div>

  <div class="grid_12">
    <div class="documents-product-title cf">
      {% set prod_url = url('products.product', slug=product.slug) %}
      <img src="{{ product.image_alternate_url }}" height="48" width="48" alt="" />
      <a href="{{ prod_url }}">{{ pgettext('DB: products.Product.title', product.title) }}</a>
    </div>
  </div>
  <aside class="grid_3">
    {{ topic_sidebar(topics[:10], subtopics, product, topic, subtopic) }}
  </aside>
  <div class="grid_9">
  {% if product.slug == 'firefox' %}
    {# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
    <div class="firefox-download-button hidden">
      <div class="documents-download-buttons download-buttons">
        <div class="download-firefox">
          <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=body-download-button" class="download-button"
            data-event-category="Download Button"
            data-event-action="Panel Opening"
            data-event-label="{{ latest_version }}">
            <span class="download-content">
              <strong class="download-title">{{ _('Download Firefox') }}</strong>
            </span>
          </a>
          <ul class="info">
            <li><a href="https://www.mozilla.org/firefox/all/">{{ _('Systems and Languages') }}</a></li>
            <li><a href="https://www.mozilla.org/firefox/notes">{{ _("What's New") }}</a></li>
            <li><a href="https://www.mozilla.org/legal/privacy/firefox">{{ _('Privacy') }}</a></li>
          </ul>
        </div>
      </div>
    </div>
  {% endif %}

    <article id="document-list">
      <h1 class="topic-title {% if not subtopic %}cf{% endif %}">
        {% if subtopic %}
          <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}">
        {% endif %}
        {{ pgettext('DB: products.Topic.title', topic.title) }}
        {% if subtopic %}
          </a>
        {% endif %}
      </h1>

      {% if subtopic %}
        <h1 class="topic-title is-subtopic cf">
          {{ pgettext('DB: products.Topic.title', subtopic.title) }}
        </h1>
      {% endif %}

      {# Show the description if it is different than the title. Otherwise, don't bother. #}
      {% if (subtopic and subtopic.title != subtopic.description) or (not subtopic and topic.title != topic.description) %}
        <p class="topic-description cf">
          {% if subtopic %}
             {{ pgettext('DB: products.Topic.description', subtopic.description) }}
          {% else %}
            {{ pgettext('DB: products.Topic.description', topic.description) }}
          {% endif %}
        </p>
      {% endif %}

      <div class="separator"></div>

      <ul class="topic-list">
        {% if not subtopic and subtopics %}
          {# only show subtopics on the parent topic page #}
          {% for subtopic in subtopics %}
            <li class="subtopic">
              <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}"
              data-event-category="link click" data-event-action="subtopic" data-event-label="{{ subtopic.title }}">{{ pgettext('DB: products.Topic.title', subtopic.title) }}</a>
              {% if subtopic.title != subtopic.description %}
                {{ pgettext('DB: products.Topic.description', subtopic.description) }}
              {% endif %}
            </li>
          {% endfor %}
        {% endif %}
        {% for document in documents %}
          <li>
            <a href="{{ document['url'] }}" data-event-category="link click" data-event-action="document"
            data-event-label="{{ document['document_title'] }}">{{ document['document_title'] }}</a>
            {{ document['document_summary'] }}
          </li>
        {% endfor %}
      </ul>

      {% if fallback_documents %}
        <h2>{{ _('In English') }}</h2>
        {% for document in fallback_documents %}
          {% if loop.first %}<ul class="topic-list">{% endif %}
          <li>
            <a href="{{ document['url']|replace('/'+ settings.WIKI_DEFAULT_LANGUAGE +'/', '/' + request.LANGUAGE_CODE + '/') }}">{{ document['document_title'] }}</a>
          </li>
          {% if loop.last %}</ul>{% endif %}
        {% endfor %}
      {% endif %}
    </article>
  </div>
  <div class="grid_12 cf">
    <section id="get-involved-button" class="document-get-involved">
      <a class="button" href="{{ url('landings.get_involved') }}">{{ _('Volunteer for Mozilla Support') }}</a>
    </section>
  </div>
{% endblock %}

{% block for_contributors %}{% endblock %}
